<template>

    <div class="container" v-for="item in station" :key="item.id" @click="RadioDetails(item.id)">
        <div class="conter">
            <div class="project-top">
                <div class="project-img">
                    <img :src="item.cover" class="cover">
                    <!-- 遮罩层 -->
                    <div class="masklayer">
                        <div class="label">
                            <img src="../image/硬件_收音机_1.png" class="label-radio">
                            <span class="label-volume">{{ item.volume }}</span>
                        </div>
                        <div class="title">{{ item.title }}</div>
                        <!-- 播放暂停 -->
                        <div class="switch">
                            <img src="../image/播放.png" class="play">
                            <!-- <img src="../image/暂停.png" class="pause"> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="project-bottom">
                <!-- 用户名和头像 -->
                <div class="bottom-left" @click.stop="AuthorDetails(item.author.user_id)">
                    <img :src="item.author.web_url" class="avatar">
                    <span class="name">{{ item.author.user_name }}</span>
                </div>
                <!-- 收藏数和分享 -->
                <div class="bottom-right">
                    <img src="../image/爱心.png" class="collection">
                    <p class="likecount">{{ item.like_count }}</p>
                    <img src="../image//分享.png" class="share">
                </div>
            </div>
        </div>
    </div>

</template>


<script setup lang="ts" name="radio">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { defineProps } from 'vue';

let router = useRouter();
const props = defineProps<{
    station: Array<any>;
}>();


// 跳转到详情页
let RadioDetails = (id: String) => {
    router.push({ path: "/RadioDetails", query: { id: String(id) } });
};

let AuthorDetails = (id: String) => {
    router.push({ path: "/AuthorDetails", query: { id: String(id) } });
};

</script>


<style scoped>
.container {
    width: 100%;
    background-color: white;
    padding-top: 13rem;
}


.DateSelection {
    text-align: center;
    height: 20rem;
    background-color: white;
}


.conter {
    margin: 0 15rem;

}

.project-top {

    .project-img {
        position: relative;
        margin-top: 1rem;
    }
}


.cover {
    width: 100%;
    border-radius: 5rem;
}


.masklayer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 98%;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 5rem;

    .label {
        position: absolute;
        top: 0;
        left: 0;
        margin: 10rem 0 0 10rem;

    }

    .label-radio {
        width: 20rem;
        margin-bottom: -5rem;
    }

    .label-volume {
        margin-left: 5rem;
        font-size: 12rem;
        color: #ddd6d8;
    }

    .title {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0 0 15rem 15rem;
        color: #ddd6d8;

    }

    .switch {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .play,
    .pause {
        width: 30rem;
        /* height: 20rem; */
        margin: 0 10rem 10rem 0;
    }
}



.project-bottom {
    /* background-color: aqua; */
    color: #d8cdcd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rem 0;

    /* 用户名和头像 */
    .avatar {
        border-radius: 50%;
        width: 25rem;
        margin-bottom: -5rem;
    }

    .name {
        margin-left: 5rem;
        font-size: 15rem;
    }

    /* 收藏数和分享 */
    .bottom-right {
        color: #a8a5a5;
        display: flex;
    }

    .collection {
        width: 25rem;
    }

    .share {
        width: 25rem;
        margin-left: 15rem;
    }

    .likecount {
        font-size: 12rem;
        padding-top: 5rem;
    }
}
</style>
